<template>
  <div class="colorF organizationBox flexC"
       style="flex: 2.6;overflow: hidden">
    <div class="flex flex2"
         style="height: 70%">
      <data-sea-center />
      <div class="flex1 right_box flexC bk2">
        <div class="title flex"><i class="title_line"></i><span>场地秩序</span>
          <BaseSelect v-on:select="showProject"
                      :selectedValue="projectName"
                      :dataList="list"
                      :widthData="widthData">
          </BaseSelect>
        </div>
        <div class="jiandulc"
             @mouseover="stoploop"
             @mouseout="startloop">
          <ul class="flexC gmInfo"
              style="margin: .8rem 1rem;"
              v-bind:style="{ marginTop: loopjiandulc + 'rem'}">
            <li class="font_s16 select_item"
                v-for="(item, index) in loopdata2"
                :key=index>
              <p class="font_s22">{{ item.title }}</p>
              <p style="margin-top: .6rem">公墓地址：{{ item.address }} </p>
              <p>最大承载力：{{ item.czl }}&nbsp;&nbsp;&nbsp;今日预约数：{{ item.yys }}</p>
              <p>负责人：{{ item.hzr }}&nbsp;&nbsp;&nbsp;电话：{{ item.phone }}</p>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <data-sea-bottom />
  </div>
</template>

<script>
import DataSeaCenter from "./DataSeaCenter";
import DataSeaBottom from "./DataSeaBottom";
import BaseSelect from "./BaseSelect";
export default {
  name: 'DataSeaRight',
  components: { BaseSelect, DataSeaBottom, DataSeaCenter },
  data () {
    return {
      loopfun: null,
      loopdata: [{}],
      loopjiandulc: 0,
      projectName: { // 岁子组件的选择值改变而改变的值
        key: '615d9801-bc2485e4',
        value: '乐乡公墓'
      },
      widthData: '',
      list: [{
        key: '8E5F3620-A9E28248', value: '乐乡公墓'
      }, {
        key: '615d9801-bc2485e4', value: '界龙古园'
      }, {
        key: '5f1e9f04-76a582d6', value: '长桥山庄'
      }, {
        key: '7fe90d79-2de01adc', value: '海港陵园'
      }, {
        key: '959b6c15-86a0bb87', value: '天逸静园'
      }, {
        key: 'f5458d84-5a0de5c8', value: '永安公墓'
      }],
      loopdata2: [
        {
          title: '乐乡公墓',
          address: '川沙镇栏学路8号',
          czl: 15000,
          yys: 300,
          hzr: ' 杨凤岗',
          phone: '58374638'
        }, {
          title: '界龙古园',
          address: '川沙镇界龙一路759号',
          czl: 35000,
          yys: 600,
          hzr: '周勇泉',
          phone: '58944083'
        }, {
          title: '长桥山庄',
          address: '沪南公路7960号',
          czl: 37000,
          yys: 500,
          hzr: '朱叶云',
          phone: '68171688'
        }, {
          title: '海港陵园',
          address: ' 临港新城杞青路1717号',
          czl: 35000,
          yys: 4000,
          hzr: '刘保林',
          phone: '58065005*680'
        }
      ]
    }
  },
  mounted () {
    this.startloop()
  },
  methods: {
    showProject () {
    },
    stoploop () {
      clearInterval(this.loopfun)
    },
    startloop () {
      this.loopfun = setInterval(() => {
        if (this.loopjiandulc >= -3.9375 * (this.loopdata.length + this.loopdata2.length)) {
          this.loopjiandulc -= 0.1
        } else {
          this.loopjiandulc = 12
          this.loopjiandulc -= 0.1
        }
      }, 50)
    }
  }
}
</script>

<style scoped lang="scss">
.bk2 {
  background: url("../../assets/img/zhjg/gray_bg.png") no-repeat;
  background-size: 100% 100%;
  padding: 0.6rem 0.5rem 0.5rem 0.5rem;
  box-sizing: border-box;
}
.title {
  height: 2.8125rem;
  line-height: 2.8125rem;
  padding-left: 1rem;
  position: relative;
  background: url("../../assets/img/zhjg/ic_baioqian.png") no-repeat;
  background-size: 100% 100%;
  font-family: PingFang SC;
  .title_line {
    width: 3px;
    height: 1.125rem;
    margin-top: 0.84375rem;
    margin-right: 0.6rem;
    background: linear-gradient(0deg, #87cced, #d8fbfe);
  }
  span {
    font-weight: bold;
    color: #97e2f4;
    background: linear-gradient(0deg, #87cced 0%, #d8fbfe 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}
.organizationBox {
  height: 100%;
  position: relative;
  padding: 0 1.8rem 0 0;
  box-sizing: border-box;
  .jiandulc {
    height: 35.625rem;
    overflow: hidden;
  }
  .right_box {
    .gmInfo li {
      /* background: url("../../assets/img/dataSea/12.png") no-repeat;
      background-size: 100% 100%;*/
    }
    .select_item {
      padding: 1rem 1.3rem;
      box-sizing: border-box;
      color: #00b3ff;
      border: 1px solid #29479a;
      background: rgba(149, 191, 255, 0.07);
      margin-bottom: 0.7rem;
    }
    /*    .title {
      line-height: 2.1875rem;
      text-align: left;
      padding-left: 2rem;
      position: relative;
      .title_img {
        width: 1.4375rem;
        margin: 0 .2rem 0 1rem;
        height: 1.75rem;
        position: absolute;
        top: .2rem;
        left: 0rem
      }
      .selectBox {
        position: absolute;
        top: 0;
        right: 1rem;
      }
    }*/
  }
}
</style>
